import React from 'react'
import { Carousel, WingBlank,NavBar,Icon,Card,WhiteSpace, Button } from 'antd-mobile'
import './index.less';
import Footer from '../../components/Footer/index';
export default class InvestOnline extends React.Component{
 
    state = {
        data: ['1', '2', '3'],
        imgHeight: 176,
        imagesData:[
            {'imgsrc':'1','title':'车险  全面保障  出行无忧'},
            {'imgsrc':'2','title':'意外险 杜绝风险  健康生活'}
        ]
      }
      componentDidMount() {
        // simulate img loading
        setTimeout(() => {
          this.setState({
            data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
          });
        }, 100);
      }

    render(){
        return(
            <div style={{marginBottom:'50px'}}>
            <Button type="primary" onClick={()=>{
                const{history}=this.props;
                history.push({pathname:'/equity'})

            }}>去权益 </Button>
                <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() => console.log('onLeftClick')}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >产品展示</NavBar>
                <Carousel
                    autoplay={false}
                    infinite
                >
                {this.state.data.map(val => (
                    <a
                    key={val}
                    href="http://www.alipay.com"
                    style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                    >
                    <img
                        src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top' }}
                        onLoad={() => {
                        // fire window resize event to change height
                        window.dispatchEvent(new Event('resize'));
                        this.setState({ imgHeight: 'auto' });
                        }}
                    />
                    </a>
                ))}
                </Carousel>
                {this.state.imagesData.map(val=>(
                    <WingBlank key={val.title}  size="xl">
                    <WhiteSpace size="xl" />
                    <Card onClick={()=>console.log('card click')}>
                    <Card.Header
                        title={val.title}
                    />
                    <Card.Body>
                        <div>
                            {/* <img src={`https://zos.alipayobjects.com/rmsportal/${val.imgsrc}.png`} */}
                            <img alt="" src={require(`../../resource/images/card-${val.imgsrc}.jpg`)}
                            style={{ width: '100%',height:'120px',borderRadius:'15px'}}/>
                        </div>
                    </Card.Body>
                   
                    </Card>
                    <WhiteSpace size="xl" />
                </WingBlank>
                ))}
                <Footer selectTab='index'/>
            </div>
        );
    }
}